import { defineComponent, h, ref, toRefs, watch } from 'vue'
import PropTypes from '@/utils/PropTypes'
import ModalCom from '../modalCom'
import { Image } from 'ant-design-vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import './index.less'

export default defineComponent({
  name: 'PreviewPDF',
  props: {
    path: PropTypes.string().def(''),
    visible: PropTypes.bool().def(false),
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    type k = { type: string; url: string }
    const { path, visible } = toRefs(props)
    const urlList = ref<k[]>([])
    const index = ref(0)
    const prev = () => {
      index.value = index.value > 0 ? index.value - 1 : 0
    }
    const next = () => {
      index.value =
        index.value < urlList.value.length - 1
          ? index.value + 1
          : urlList.value.length - 1
      console.log(index.value, 'index.value')
    }
    const handelCancel = () => {
      emit('update:visible', false)
      urlList.value = []
    }
    watch(
      () => path.value,
      () => {
        urlList.value = path.value.split(',').map((v): k => {
          const suffix = v?.split('.')
          const item = {
            type: suffix[suffix.length - 1],
            url: process.env.VUE_APP_IMAGE_URL + v,
          }
          return item
        })
      },
    )
    return () => (
      <div class="preview-pdf-box">
        {urlList.value[index.value]?.type == 'pdf' ? (
          <ModalCom
            // title="预览PDF"
            visible={visible.value}
            width={1000}
            bodyStyle={{ height: 'calc(100vh - 30px)', padding: 0 }}
            position={{ top: '20px', left: 0 }}
            footer={null}
            v-slots={{
              form: () => (
                <>
                  {
                    <embed
                      src={urlList.value[index.value]?.url}
                      width="100%"
                      height="100%"
                      type="application/pdf"
                    />
                  }
                </>
              ),
            }}
            onUpdate:handelCancel={handelCancel}
          ></ModalCom>
        ) : (
          visible.value && (
            <Image
              src={urlList.value[index.value]?.url}
              style={{ display: 'none' }}
              preview={{
                visible: true,
                onVisibleChange: (v) => emit('update:visible', false),
              }}
            />
          )
        )}
        {urlList.value.length > 1 && (
          <div class="btn-group df-between">
            <span class="btn df-center" onClick={prev}>
              {h(LeftOutlined, {
                style: {
                  fontSize: '26px',
                  color: '#fff',
                },
              })}
            </span>
            <span class="btn df-center" onClick={next}>
              {h(RightOutlined, {
                style: {
                  fontSize: '26px',
                  color: '#fff',
                },
              })}
            </span>
          </div>
        )}
      </div>
    )
  },
})
